Skip to content

chore(fonts):⚡reduce font payload #1999

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
wants to merge 10 commits into
base: gh-pages
Choose a base branch
from
Open

chore(fonts):⚡reduce font payload #1999

wants to merge 10 commits into from
+10 −529

Conversation

ShubhamOulkar
Copy link
Member

@ShubhamOulkar ShubhamOulkar commented Aug 2, 2025 •
edited
Loading

page load time reduced by ~300-400ms

express.com preview
expressjs com tree a tree
expressjs com perf a

~230-270 kB reduction in font payload

new font files old font files
Screenshot 2025-08-02 190411 image

Font source: https://github.com/fontsource/font-files/tree/main/fonts/variable/open-sans/files

@ShubhamOulkar ShubhamOulkar requested a review from a team as a code owner August 2, 2025 13:30
@netlify Netlify
Copy link

netlify bot commented Aug 2, 2025 •
edited
Loading

✅ Deploy Preview for expressjscom-preview ready!

Name Link
🔨 Latest commit 217920f
🔍 Latest deploy log https://app.netlify.com/projects/expressjscom-preview/deploys/689ca7e1c4595e0008482693
😎 Deploy Preview https://deploy-preview-1999--expressjscom-preview.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Aug 2, 2025 •
edited
Loading

🚦 Lighthouse Results (Mobile & Desktop)

URL Device Perf A11y Best Practices
/ mobile 🔴 60 🟢 100 🟢 96
/en/blog/posts.html mobile 🟠 75 🟢 96 🟢 96
/en/5x/api.html mobile 🟠 75 🟢 95 🟢 96
/ desktop 🟢 100 🟢 100 🟢 96
/en/blog/posts.html desktop 🟢 99 🟢 96 🟢 93
/en/5x/api.html desktop 🟢 99 🟢 95 🟢 96

@ShubhamOulkar ShubhamOulkar changed the title chore(fonts):⚡Improve website performance [WIP] chore(fonts):⚡Improve website performance Aug 2, 2025
@ShubhamOulkar
Copy link
Member Author

ShubhamOulkar commented Aug 2, 2025 •
edited
Loading

🚦 Lighthouse Results (Mobile & Desktop)

Need to remove spaces to edit comment correctly. Also need to increase wait time for Netlify preview.

Happy 😃 mobile results are improving.

@ShubhamOulkar ShubhamOulkar changed the title [WIP] chore(fonts):⚡Improve website performance chore(fonts):⚡reduce font payload Aug 3, 2025
@ShubhamOulkar
Copy link
Member Author

I just realized that for improving performance on mobile needs refactoring in logic and assets file. It should be good to do it in other PR.

bjohansebas
bjohansebas requested changes Aug 3, 2025
View reviewed changes
Copy link
Member

@bjohansebas bjohansebas left a comment •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We need to know where you got the fonts before accepting this PR.

bjohansebas
bjohansebas reviewed Aug 3, 2025
View reviewed changes
@ShubhamOulkar
Copy link
Member Author

ShubhamOulkar commented Aug 4, 2025 •
edited
Loading

We need to know where you got the fonts before accepting this PR.

@bjohansebas, I got this woff2 fonts from https://github.com/fontsource/font-files/tree/main/fonts/variable/open-sans/files

@expressjs expressjs deleted a comment from github-actions bot Aug 4, 2025
@expressjs expressjs deleted a comment from github-actions bot Aug 4, 2025
@expressjs expressjs deleted a comment from github-actions bot Aug 4, 2025
@Phillip9587
Copy link
Contributor

Fontsource provides npm packages for the fonts: https://fontsource.org/fonts/open-sans/install

@ShubhamOulkar
Copy link
Member Author

Fontsource provides npm packages for the fonts: https://fontsource.org/fonts/open-sans/install

Hi @Phillip9587, we don't use any bundler in this project so that we can not use this. See Prerequisites section. Fontsource provide CDN option, but I prefer self-hosting fonts. Tell me if I am missing something because you're suggesting this second time I guess.

ShubhamOulkar
ShubhamOulkar commented Aug 5, 2025
View reviewed changes
Copy link
Member Author

@ShubhamOulkar ShubhamOulkar left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM 👍 Please, whoever reviews it, merge it as soon as possible since it improves user experience for slower Internet connections.

@ShubhamOulkar ShubhamOulkar requested a review from crandmck August 7, 2025 02:53
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@bjohansebas bjohansebas Awaiting requested review from bjohansebas

@crandmck crandmck Awaiting requested review from crandmck

Requested changes must be addressed to merge this pull request.

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@ShubhamOulkar @Phillip9587 @bjohansebas